<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录-注册页面</title>

    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:600'>

    <link rel="stylesheet" href="/static/css/login_style.css">

</head>
<body>
<div class="login-wrap">
    <div class="login-html">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
        <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
        <div class="login-form">

            <%--登录--%>
            <div class="sign-in-htm">
                <form action="" name="loginform"
                      accept-charset="utf-8"
                      method="post"
                      enctype="application/x-www-form-urlencoded">
                    <div class="group">
                        <label for="user" class="label">用户名</label>
                        <input id="userId" type="text" class="input" name="userId" required>
                    </div>
                    <div class="group">
                        <label for="pass" class="label">密码</label>
                        <input id="userPwd" type="password" class="input" data-type="password" name="userPwd" required>
                    </div>
                    <div class="group">
                        <input id="check" type="checkbox" class="check" checked>
                        <label for="check"><span class="icon"></span>保持登录</label>
                    </div>
                    <div class="group">
                        <input id="loginBtn" type="button" class="button" value="登录">
                    </div>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <a href="#forgot">忘记密码?</a>
                    </div>

                </form>
            </div>
            <%--注册--%>
            <div class="sign-up-htm">
                <form>
                    <div class="group">
                        <label for="user" class="label">用户名</label>
                        <input id="user" type="text" class="input" name="userId" required>
                    </div>
                    <div class="group">
                        <label for="pass" class="label">密码</label>
                        <input id="pass" type="password" class="input" data-type="password" name="userPwd"  required>
                    </div>
                    <div class="group">
                        <label for="pass" class="label">重复密码</label>
                        <input id="pass" type="password" class="input" data-type="password" name="userPwdRepeat"  required>
                    </div>
                    <div class="group">
                        <label for="pass" class="label">邮箱</label>
                        <input id="pass" type="text" class="input" required>
                    </div>
                    <div class="group">
                        <input type="submit" class="button" value="注册">
                    </div>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <label for="tab-1">Already Member?</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">


    $('#loginBtn').bind('click', function () {
        var userId = $("#userId");
        if (userId.val().trim() === '') {
            userId.attr("required", "true");
            userId.focus();
            return false;
        }

        var userPwd = $("#userPwd");
        if (userPwd.val() === '') {
            userPwd.attr("required", "true");
            userPwd.focus();
            return false;
        }
        doLogin(userId.val().trim(), userPwd.val());
    });


    function doLogin(userId, userPwd) {
        $.ajax({
            "async": true,
            method: "POST",
            url: '<%=request.getContextPath()%>/userAction/login',
            headers: {
                contentType: "application/x-www-form-urlencoded"
            },
            data: {
                userId: userId,
                userPwd: userPwd
            },
            dataType: 'json',
            cache: false,   //不用缓存
            success: function (data) {  //请求成功，http状态码为200。返回的数据已经打包在data中了。
                if (data.code === 1) {   //获判断json数据中的code是否为1，登录的用户名和密码匹配，通过效验，登陆成功
                    window.location.href = "<%=request.getContextPath()%>/mvc/home";    //跳转到主页
                } else {    //登录不成功
                    alert(data.msg);
                }
            }
        });
    }

</script>

</body>
</html>
